<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动物视频生成器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#7C3AED',
                        accent: '#EC4899',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-nature {
                background-image: url('https://picsum.photos/id/15/1920/1080');
                background-size: cover;
                background-position: center;
            }
            .bg-blur {
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            .main-container {
                height: calc(100vh - 100px);
            }
        }
    </style>
</head>
<body class="font-inter text-dark min-h-screen flex flex-col overflow-hidden">
    <!-- 背景层 -->
    <div class="fixed inset-0 bg-nature opacity-20 z-0"></div>

    <!-- 顶部导航 -->
    <header class="bg-white/80 bg-blur shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-[clamp(1.2rem,3vw,1.8rem)] font-bold text-primary flex items-center">
                <i class="fa fa-video-camera mr-2 text-accent"></i>
                <span>动物视频生成器</span>
            </h1>
            <div class="bg-primary/10 px-3 py-1 rounded-full text-xs font-medium text-primary">
                基于COZE API
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-4 main-container flex-grow">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 h-full">
            <!-- 左侧：输入区域 -->
            <div class="lg:col-span-5 bg-white/90 bg-blur rounded-2xl shadow-lg p-4 md:p-6 transform transition-custom flex flex-col h-full">
                <!-- 错误提示区域 -->
                <div id="errorAlert" class="bg-red-50 border border-red-100 rounded-xl p-3 mb-4 hidden">
                    <div class="flex items-start">
                        <i class="fa fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                        <div>
                            <h3 class="font-medium text-red-800 text-sm">操作失败</h3>
                            <p class="text-xs text-red-700 mt-1" id="errorMessage">错误详情将显示在这里</p>
                        </div>
                    </div>
                </div>

                <div class="mb-4 flex-grow">
                    <h2 class="text-[clamp(1rem,2vw,1.4rem)] font-semibold mb-2 text-dark">描述你想要的动物</h2>
                    <p class="text-gray-600 text-sm mb-3">输入动物特征、动作或场景描述</p>

                    <div class="relative mb-4">
                        <textarea
                            id="animalInput"
                            class="w-full h-full min-h-[180px] p-3 border-2 border-gray-200 rounded-xl focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom resize-none text-sm"
                            placeholder="例如：森林中跳跃的红色狐狸，阳光透过树叶洒在它身上..."
                        ></textarea>
                        <div class="absolute right-2 bottom-2 text-xs text-gray-500" id="charCount">0/200</div>
                    </div>

                    <!-- 示例区域 -->
                    <div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
                        <p class="text-xs font-medium text-gray-700 mb-2">示例描述：</p>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <div class="bg-white p-2 rounded border border-gray-100 cursor-pointer hover:bg-primary/5 example-item">雪地玩耍的萨摩耶犬</div>
                            <div class="bg-white p-2 rounded border border-gray-100 cursor-pointer hover:bg-primary/5 example-item">天空飞翔的金色雄鹰</div>
                            <div class="bg-white p-2 rounded border border-gray-100 cursor-pointer hover:bg-primary/5 example-item">雨林爬行的绿色蜥蜴</div>
                            <div class="bg-white p-2 rounded border border-gray-100 cursor-pointer hover:bg-primary/5 example-item">草原奔跑的斑马群</div>
                        </div>
                    </div>
                </div>

                <button
                    id="generateBtn"
                    class="w-full mt-4 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-xl shadow transition-custom flex items-center justify-center"
                >
                    <i class="fa fa-magic mr-2"></i>
                    <span>生成动物视频</span>
                </button>
            </div>

            <!-- 右侧：视频播放区域 -->
            <div class="lg:col-span-7 flex flex-col">
                <section class="bg-dark rounded-2xl shadow-xl overflow-hidden relative group flex-grow flex flex-col">
                    <div id="videoContainer" class="aspect-video bg-black flex items-center justify-center flex-grow">
                        <div id="placeholderContent" class="text-center p-6 text-white">
                            <i class="fa fa-film text-5xl mb-3 text-gray-500"></i>
                            <p class="text-gray-400">生成的视频将显示在这里</p>
                            <p class="text-xs text-gray-500 mt-2">点击左侧"生成动物视频"按钮开始创作</p>
                        </div>
                        <video
                            id="videoPlayer"
                            class="w-full h-full hidden cursor-pointer"
                            controls
                            poster=""
                            onclick="this.requestFullscreen().catch(e=>console.log('全屏请求失败:',e))"
                        ></video>
                        <div id="loadingIndicator" class="absolute inset-0 bg-black/70 flex items-center justify-center hidden">
                            <div class="text-center">
                                <div class="inline-block animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-primary mb-3"></div>
                                <p class="text-white">正在生成视频，请稍候...</p>
                                <p class="text-xs text-gray-400 mt-1">视频生成可能需要30秒到2分钟时间</p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark/80 bg-blur text-white py-2 text-center text-gray-400 text-xs">
        <p>© 2025 动物视频生成器 | 后端运行在 <code class="bg-black/50 px-1 py-0.5 rounded">http://localhost:5000</code></p>
    </footer>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const animalInput = document.getElementById('animalInput');
            const charCount = document.getElementById('charCount');
            const generateBtn = document.getElementById('generateBtn');
            const videoPlayer = document.getElementById('videoPlayer');
            const placeholderContent = document.getElementById('placeholderContent');
            const loadingIndicator = document.getElementById('loadingIndicator');
            const exampleItems = document.querySelectorAll('.example-item');
            const errorAlert = document.getElementById('errorAlert');
            const errorMessage = document.getElementById('errorMessage');

            // 隐藏错误提示
            const hideError = () => {
                errorAlert.classList.add('hidden');
            };

            // 显示错误提示
            const showError = (message) => {
                errorMessage.textContent = message;
                errorAlert.classList.remove('hidden');
                setTimeout(hideError, 8000);
            };

            // 字符计数
            animalInput.addEventListener('input', () => {
                hideError();
                const count = animalInput.value.length;
                const maxCount = 200;
                charCount.textContent = `${count}/${maxCount}`;

                if (count > maxCount) {
                    animalInput.value = animalInput.value.substring(0, maxCount);
                    charCount.textContent = `${maxCount}/${maxCount}`;
                }
            });

            // 示例点击
            exampleItems.forEach(item => {
                item.addEventListener('click', () => {
                    hideError();
                    animalInput.value = item.textContent;
                    animalInput.dispatchEvent(new Event('input'));
                });
            });

            // 生成视频
            generateBtn.addEventListener('click', async () => {
                hideError();
                const inputText = animalInput.value.trim();

                if (!inputText) {
                    alert('请输入动物描述');
                    return;
                }

                // 显示加载状态
                placeholderContent.classList.add('hidden');
                videoPlayer.classList.add('hidden');
                loadingIndicator.classList.remove('hidden');
                generateBtn.disabled = true;
                generateBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i><span>生成中...</span>';

                try {
                    const response = await fetch('/generate_video', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ input: inputText })
                    });

                    if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
                    const result = await response.json();

                    if (result.success && result.video_url) {
                        loadingIndicator.classList.add('hidden');
                        videoPlayer.src = result.video_url;
                        videoPlayer.classList.remove('hidden');
                        videoPlayer.load();
                    } else {
                        throw new Error(result.video_url || '未返回有效的视频URL');
                    }
                } catch (error) {
                    loadingIndicator.classList.add('hidden');
                    placeholderContent.classList.remove('hidden');
                    showError(`生成失败: ${error.message}`);
                    console.error('视频生成错误:', error);
                } finally {
                    generateBtn.disabled = false;
                    generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i><span>生成动物视频</span>';
                }
            });
        });
    </script>
</body>
</html>